<template>
  <div class="lun">
    <img :src="this.adv.imgsrc" >
    <h1>{{this.adv.dec}}</h1>
    <p><button>-</button>{{num}} <button>+</button> </p>
    <button class="t1">立即购买</button><button class="t1">加入购物车</button>
  </div>
</template>

<script>
 import {showDesc} from '@/api/test.js'
export default {
   data(){
    return{
        num:1,
        id:this.$route.params.advid,
        adv:{}
    }
   },
   methods:{
    getAdv(){
        showDesc(this.id).then(res=>{
            this.adv=res.data
            console.log(res);
        },err=>{
            console.log(err)
        })
    }
   },
   mounted(){
    this.getAdv()
   }

}
</script>

<style scoped>

*{
    margin: 0px auto;
    padding: 0px auto;
}
.lun{
    margin-top: 150px; ;
    position: relative;
    width: 700px;
    height: 800px;
}

img{
    float: left;
    width: 315px;
    height: 423px;
    border-radius: 20px;
    margin-right: 20px;
}

.t1{

   border: rgb(255, 83, 0);
   background: rgb(255, 83, 0);
    width: 100px;
    height: 50px;
  margin-right: 10px; ;
    margin-top: 320px;
    color: aliceblue;
}x
p{
    position: absolute;
    top: 290px;
    left: 420px;
}
.t1:hover{
    background: rgb(236, 85, 9);
}
h4{
    position: absolute;
left: 320px;
top:150px;
}

</style>